<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="60%"
    @close="close"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <div v-if="form.type != 'F'">
            <el-form-item  label="菜单图标">
              <el-popover
                popper-class="icon-selector-popper"
                trigger="hover"
                width="775"
              >
                <template #reference>
                  <!--                  <vab-icon
                                      v-if="form.metaIcon"
                                      :icon="form.metaIcon"
                                    />-->
                  <el-input v-model="form.metaIcon" />
                </template>
                <vab-icon-selector @handle-icon="handleIcon" />
              </el-popover>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级菜单">
            <treeselect
              v-model="form.parentId"
              :options="superMenus"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="form.type" >
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
         <div v-if="form.type != 'F'">
           <el-form-item  prop="path">
              <span slot="label">
                <el-tooltip content="路由地址" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
              </span>
             <el-input v-model="form.path" placeholder="请输入路由地址" />
           </el-form-item>
         </div>
        </el-col>
        <el-col :span="12" v-if="form.type == 'C'">
          <div>
            <el-form-item prop="component">
              <span slot="label">
                <el-tooltip content="第一级路由是为Layout，其余为层级为vue的文件路径" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
         <div v-if="form.type != 'M'">
           <el-form-item>
             <el-input v-model="form.permissions" placeholder="请输入权限标识" maxlength="100" />
             <span slot="label">
                <el-tooltip content="控制器中定义的权限字符" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
           </el-form-item>
         </div>
        </el-col>
        <div v-if="form.type == 'C'">
          <el-col :span="12" >
            <el-form-item prop="activeMenu">
              <span slot="label">
                <el-tooltip content="高亮指定菜单，要从跟路由的path开始拼接" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                activeMenu
              </span>
              <el-input v-model="form.activeMenu" placeholder="请输入activeMenu" />
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="12">
          <div v-if="form.type != 'F'">
            <el-form-item >
              <span slot="label">
                <el-tooltip content="是否显示在菜单中显示隐藏路由（默认值：false）" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model="form.alwaysShow">
                <el-radio label="1">显示</el-radio>
                <el-radio label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12" >
          <div v-if="form.type == 'C'">
            <el-form-item prop="redirect">
              <span slot="label">
                <el-tooltip content="重定向到子路由" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                redirect
              </span>
              <el-input v-model="form.redirect" placeholder="请输入redirect" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div v-if="form.type == 'C'">
            <el-form-item >
              <span slot="label">
                <el-tooltip content="动态传参路由是否新开标签页" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                dynamic
              </span>
              <el-radio-group v-model="form.dynamicNewTab">
                <el-radio label="1">开启</el-radio>
                <el-radio label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import VabIconSelector from '@/extra/VabIconSelector'
import {doAdd, doEdit, getListMenus} from '@/api/menuManagement'

export default {
  name: 'MenuManagementEdit',
  components: { VabIconSelector,Treeselect },
  // components: {Treeselect },
  props: {
    roleCode: {
      type:Number,
      default:26
    }
  },
  data() {
    return {
      form: {
        id: "",
        parentId: 0,
        menuName: "",
        path: "",
        component: "",
        metaIcon: "",
        type:'M',
        permissions:'',
        orderNum:1,
        activeMenu:"",
        redirect:"",
        alwaysShow: "1",
        dynamicNewTab:"0"
      },
      superMenus: [],
      rules: {
        menuName: [{required: true, trigger: 'blur', message: '请输入菜单名称'}],
        path: [{required: true, trigger: 'blur', message: '请输入path'}],
        orderNum: [{required: true, trigger: 'blur', message: '请输入设置顺序'}],
      },
      title: '',
      dialogFormVisible: false,
    }
  },
  async created() {
    this.fatchMenus()
    this.listLoading = true
  },
  methods: {

    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.children
      };
    },
    handleIcon(item) {
      this.form.metaIcon = item.remixIcon
    },
    async showEdit(row) {
      if (!row) {
        this.title = '添加'
        this.fatchMenus()
      } else {
        this.title = '编辑'
        this.fatchMenus()
        this.form = JSON.parse(JSON.stringify(Object.assign({}, row)))
      }
      this.dialogFormVisible = true
    },
    fatchMenus(){
      this.superMenus = [];
      const menu = { id: 0, menuName: '主类目', children: [] };
      getListMenus(11).then(Response => {
        menu.children = Response.data
        this.superMenus.push(menu);
      })
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid && this.form.id) { //编辑
          console.log("this.form")
          console.log(this.form)
          const { status,message } = await doEdit(this.form)
          this.$baseMessage(message, 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        } else if (valid && !this.form.id) { // 添加
          console.log("add  this.form")
          console.log(this.form)
          const {status,message} = await doAdd(this.form)
          console.log("status");
          console.log(status);
          if(status === 100){
            this.$baseMessage(message, 'error', 'vab-hey-message-error')
          }
          if(status === 200){
            this.$baseMessage(message, 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        }
      })
    },
  },
}
</script>

<style scoped>
/*::v-deep .el-form-item__content{*/
/*  width: 175px;*/
/*}*/
</style>
